<template>
  <view class="my-pets-container">
    <view class="pet-grid">
      <view class="pet-card" v-for="(pet, index) in pets" :key="index" @click="viewPetDetail(pet)">
        <view class="pet-image">
          <image :src="pet.image" mode="aspectFill"></image>
        </view>
        <view class="pet-name">{{ pet.name }}</view>
        <view class="pet-info">
          <view class="pet-gender" :class="pet.gender === '公' ? 'male' : 'female'">{{ pet.gender }}</view>
          <view class="pet-age">{{ pet.age }}</view>
          <view class="pet-weight">{{ pet.weight }}</view>
        </view>
      </view>
    </view>
    
    <view class="add-pet-btn" @click="addNewPet">
      <text>+ 添加宠物</text>
    </view>
  </view>
</template>

<script>
// 页面配置
export default {
  navigationBarTitleText: '我的宠物',
  navigationBarBackgroundColor: '#0c3441',
  navigationBarTextStyle: 'white'
}
</script>

<script setup>
import { ref } from 'vue';

// 宠物列表
const pets = ref([
  {
    id: 1,
    name: '宠物昵称',
    type: '猫',
    breed: '橘猫',
    gender: '公',
    age: '1年3个月',
    weight: '2.5公斤',
    image: '/static/images/pet/cat.png'
  },
  {
    id: 2,
    name: '宠物昵称',
    type: '狗',
    breed: '金毛',
    gender: '公',
    age: '1岁10个月',
    weight: '1.8公斤',
    image: '/static/images/pet/dog.png'
  },
  {
    id: 3,
    name: '宠物昵称',
    type: '狗',
    breed: '金毛',
    gender: '母',
    age: '1年3个月',
    weight: '1.2公斤',
    image: '/static/images/pet/dog2.png'
  }
]);

// 查看宠物详情
function viewPetDetail(pet) {
  uni.navigateTo({
    url: `/pages/pet/pet-detail?id=${pet.id}`
  });
}

// 添加新宠物
function addNewPet() {
  uni.navigateTo({
    url: '/pages/pet/add-pet'
  });
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.my-pets-container {
  padding: 20rpx;
  
  .pet-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
    .pet-card {
      width: 48%;
      background-color: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
      
      .pet-image {
        width: 100%;
        height: 200rpx;
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 15rpx;
        
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .pet-name {
        font-size: 28rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 10rpx;
      }
      
      .pet-info {
        display: flex;
        justify-content: center;
        align-items: center;
        
        .pet-gender, .pet-age, .pet-weight {
          font-size: 22rpx;
          margin: 0 10rpx;
        }
        
        .pet-gender {
          color: #ff6b6b;
          
          &.male {
            color: #ff6b6b;
          }
          
          &.female {
            color: #ff6b6b;
          }
        }
        
        .pet-age, .pet-weight {
          color: #999;
        }
      }
    }
  }
  
  .add-pet-btn {
    position: fixed;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffcc33;
    color: #333;
    font-size: 28rpx;
    padding: 20rpx 100rpx;
    border-radius: 40rpx;
    text-align: center;
    box-shadow: 0 4rpx 10rpx rgba(255, 204, 51, 0.3);
  }
}
</style>